<template>
    <div class="box-home">
        <div class="header">
            <img src="@/assets/img/Home/navi_title_v6.png" alt="">
            <el-input :prefix-icon="Search" class="input-home" placeholder="搜一搜" @focus="focusHandler" />
        </div>
        <div class="banner">
            <el-carousel height="160px" class="">
                <el-carousel-item v-for="item in bannerList" :key="item.id">
                    <el-image :src="item.avatar"/>
                </el-carousel-item>
            </el-carousel>
        </div>
        <ul class="nav-home">
            <li>
                <img src="@/assets/img/Home/nav-one.jpg" alt="">
                <p>上新精选</p>
            </li>
            <li>
                <img src="@/assets/img/Home/nav-two.jpg" alt="">
                <p>小米众筹</p>
            </li>
            <li>
                <img src="@/assets/img/Home/nav-three.jpg" alt="">
                <p>有品秒杀</p>
            </li>
            <li>
                <img src="@/assets/img/Home/nav-four.jpg" alt="">
                <p>生活优选</p>
            </li>
            <li>
                <img src="@/assets/img/Home/nav-five.jpg" alt="">
                <p>小米自营</p>
            </li>
        </ul>
        <div class="demo-image__lazy">
            <el-image v-for="url in urls" :key="url.id" :src="url.avatar" lazy />
        </div>
        <div class="footer">
            <MiNav :status="'Home'"></MiNav>
        </div>
    </div>
</template>
<script setup lang="ts">
import MiNav from '@/components/MiNav/MiNav.vue';
import { reactive, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import router from '@/router';

interface banner {
    id: number;
    avatar: string;
}
const bannerList = reactive<banner[]>([
    { id: 1, avatar: require('@/assets/img/Home/banner-one.jpg') },
    { id: 2, avatar: require('@/assets/img/Home/banner-two.jpg') },
    { id: 3, avatar: require('@/assets/img/Home/banner-three.jpg') },
    { id: 4, avatar: require('@/assets/img/Home/banner-four.jpg') },
    { id: 5, avatar: require('@/assets/img/Home/banner-five.jpg') },
])
const urls = reactive<banner[]>([
    { id: 1, avatar: require('@/assets/img/Home/1.jpg') },
    { id: 2, avatar: require('@/assets/img/Home/2.gif') },
    { id: 3, avatar: require('@/assets/img/Home/3.jpg') },
    { id: 4, avatar: require('@/assets/img/Home/4.jpg') },
    { id: 5, avatar: require('@/assets/img/Home/5.jpg') },
])
const focusHandler = () => {
    router.push({name:'ProductList'})
}
</script>

<style lang="stylus" scoped>
.box-home
    height 100%
    display flex
    flex-direction column
.header
    width 100%
    height 56px
    display flex
    align-items center
    background-color: rgb(132, 93, 50);
    padding-right 12px
    box-sizing: border-box;
    flex-shrink 0

.el-input
    border-radius 20px
    
.header img
    width 36px
    height 28px
    margin-left: 12px;

.banner
    flex-shrink 0
    
.footer
    flex-shrink 0

.nav-home
    display flex
    justify-content space-evenly
    height 74px
    font-size: 12px;
    margin-bottom 20px

.nav-home li
    display flex
    flex-direction column
    justify-content space-evenly
    align-items center

.nav-home img   
    height 60px
    width 60px














    


.demo-image__lazy 
    overflow-y: auto;

.demo-image__lazy .el-image 
    display: block;
    min-height: 200px;
    margin-bottom: 10px;

.demo-image__lazy .el-image:last-child 
    margin-bottom: 0;

</style>